import {
    CloseCircleOutlined,
    ExclamationCircleOutlined,
  } from '@ant-design/icons';
  import {
    Button,
    Col,
    DatePicker,
    Drawer,
    Form,
    Input,
    message,
    Modal,
    Row,
    Select,
    Radio,
  } from 'antd';
  import moment from 'moment';
  import { useEffect, useState } from 'react';
  import styles from '../index.less';
  const { TextArea } = Input;
  const { Option } = Select;
  
  const { confirm } = Modal;
  
  const dataMat = 'YYYY/MM/DD';
  const Setting2 = (props) => {
    const [form] = Form.useForm();
    const { visible, onCloseVisible, editObj = {}, updateObj} = props;
    const [list, setList] = useState([0]);
    const [id, setId] = useState(0);
    const [itemObj, setItemObj] = useState({});
    const [showPeople, setShowPeople] = useState(false)
  
    useEffect(() => {
      
    }, []);
  
    const onClose = () => {
      onCloseVisible(false);
    };
    const deleteList = (k) => {
      const newlist = list.filter((v) => v !== k);
      setList(JSON.parse(JSON.stringify(newlist)));
    };
    const save = () => {
      form
        .validateFields()
        .then((values) => {
          updateObj(values)
        })
        .catch((errinfo) => {
          console.log(errinfo, '--errinof');
        });
    };
    const options = [
      {
        label: 'OKR进展',
        value: 'OKR进展'
      },
      {
        label: 'OKR风险逾期',
        value: 'OKR风险逾期'
      },
      {
        label: 'OKR评价',
        value: 'OKR评价'
      },
      {
        label: 'OKR打分',
        value: 'OKR打分'
      },
      {
        label: '关联进度',
        value: '关联进度'
      },
      {
        label: '关联逾期',
        value: '关联逾期'
      },
      

    ]
    const options2 = [
      {
        label: '王佳',
        value: '王佳'
      },
      {
        label: '曹耀伟',
        value: '曹耀伟'
      },
      {
        label: '王伟华',
        value: '王伟华'
      },
      {
        label: '李明',
        value: '李明'
      },
      {
        label: '张三',
        value: '张三'
      },
      {
        label: '李四',
        value: '李四'
      },
    ]
    const changeWay = (key) => {
      if(key.includes('OKR打分')) {
        setShowPeople(true)
      } else {
        setShowPeople(false)
      }
    }
    return (
      <>
        <Drawer
          title="跟进阶段设置"
          width={620}
          onClose={onClose}
          visible={visible}
          maskClosable={false}
          bodyStyle={{ paddingBottom: 80 }}
          placement={'right'}
        >
          <Form form={form} layout="vertical">
            <div
                    className={styles.setting_drawer_wrap}
                    style={{ position: 'relative', width: '90%' }}
                  >
                    <Form.Item
                      label={`跟进方式`}
                      name={`follow`}
                      initialValue={
                        editObj[`follow`] ? editObj[`follow`] : ''
                      }
                    >
                      <Select
                        mode="multiple"
                        allowClear
                        style={{ width: '100%' }}
                        options={options}
                        onChange={changeWay}
                      />
                    </Form.Item>
                    <Form.Item
                      label={`打分人员设置`}
                      name={`scorePeople`}
                      hidden={!editObj[`scorePeople`] && !showPeople}
                      initialValue={
                        editObj[`scorePeople`] ? editObj[`scorePeople`] : ''
                      }
                    >
                      <Select
                        mode="multiple"
                        allowClear
                        style={{ width: '100%' }}
                        options={options2}
                      />
                    </Form.Item>
                    <Form.Item
                      label={`更新进展提醒（仅提醒已填 OKR 人员）`}
                      name={`update`}
                      initialValue={
                        editObj[`update`] ? editObj[`update`] : ''
                      }
                    >
                      <Radio.Group>
                        <Radio value={'1'}>是</Radio>
                        <Radio value={'2'}>否</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item
                      label={`风险逾期（仅提醒已填 OKR 人员）`}
                      name={`endTime`}
                      initialValue={
                        editObj[`endTime`] ? editObj[`endTime`] : ''
                      }
                    >
                      <Radio.Group disabled>
                        <Radio value={'1'}>是</Radio>
                        <Radio value={'2'}>否</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item
                      label={`风险阈值`}
                      name={`tx`}
                      initialValue={
                        editObj[`tx`] ? editObj[`tx`] : ''
                      }
                    >
                      <Input
                        allowClear
                        autoSize={{ minRows: 1 }}
                      />
                    </Form.Item>
                    <Form.Item
                      label={`显示所有评价`}
                      name={`read`}
                      initialValue={
                        editObj[`read`] ? editObj[`read`] : ''
                      }
                    >
                      <Radio.Group>
                        <Radio value={'1'}>是</Radio>
                        <Radio value={'2'}>否</Radio>
                      </Radio.Group>
                    </Form.Item>
                    <Form.Item
                      label={`评价提醒（仅提醒未评价记录人员）`}
                      name={`tx2`}
                      initialValue={
                        editObj[`tx2`] ? editObj[`tx2`] : ''
                      }
                    >
                      <TextArea
                        allowClear
                        autoSize={{ minRows: 1 }}
                        maxLength={300}
                      />
                    </Form.Item>
            </div>              
          </Form>
          <Row></Row>
          <Row
            style={{
              position: 'absolute',
              width: '690px',
              padding: '20px 0',
              bottom: '0px',
              background: '#ffffff',
              display: 'flex',
              justifyContent: 'center',
            }}
          >
            <Button type="primary" onClick={save} style={{ marginRight: '10px' }}>
              保存
            </Button>
            <Button onClick={onClose} style={{ marginRight: '10px' }}>
              取消
            </Button>
          </Row>
        </Drawer>
      </>
    );
  };
  
  export default Setting2;
  